<template>
  <view class="container">
<!-- 新增搜索框 -->
<view class="search-container">
      <input
        class="search-input"
        v-model="searchKeyword"
        placeholder="请输入车牌号"
        placeholder-class="input-placeholder"
        @input="handleSearch"
      />
      <uni-icons type="search" size="20" color="#666" class="search-icon" />
    </view>

    <scroll-view class="list-container" scroll-y>
      <view v-for="(item, index) in maintenanceList" :key="index" class="list-item" @click="openDetail(item)">
        <view class="title">{{ item.title }}</view>
        <view class="content">
          <image class="vehicle-image" :src="item.imageUrl" mode="aspectFill"/>
          <view class="info">
            <view class="info-item">
              <text class="label">车牌号：</text>
              <text class="value">{{ item.plateNumber }}</text>
            </view>
            <view class="info-item">
              <text class="label">申请人：</text>
              <text class="value">{{ item.applicant }}</text>
            </view>
            <view class="info-item">
              <text class="label">申请部门：</text>
              <text class="value">{{ item.department }}</text>
            </view>
            <view class="info-item">
              <text class="label">申请状态：</text>
              <text class="value" :style="{ color: item.status.color || '#333333' }">
                {{ item.status.label || item.status }}
              </text>
            </view>
            <view class="info-item">
              <text class="label">业务类型：</text>
              <text class="value">{{ item.businessTypeLabel }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <uni-popup ref="popup" type="center">
      <view class="detail-container">
        <view class="detail-header">
          <text class="detail-title">{{ currentDetail.title }}</text>
          <uni-icons type="close" size="24" color="#666" @click="closeDetail"/>
        </view>
        <view class="detail-content-container" style="overflow-y: auto;">
          <view class="detail-content">
            <view class="section">
              <view class="section-title">申请信息</view>
              <view class="info-grid">
                <view class="grid-item">
                  <text class="label">申请人：</text>
                  <text class="value">{{ currentDetail.applicant }}</text>
                </view>
                <view class="grid-item">
                  <text class="label">申请部门：</text>
                  <text class="value">{{ currentDetail.department }}</text>
                </view>
                <view class="grid-item">
                  <text class="label">审批人：</text>
                  <text class="value">{{ currentDetail.approver }}</text>
                </view>
                <view class="grid-item">
                  <text class="label">申请状态：</text>
                  <text class="value" :style="{ color: currentDetail.status.color || '#333333' }">
                    {{ currentDetail.status.label || currentDetail.status }}
                  </text>
                </view>
                <view class="grid-item">
                  <text class="label">实施人：</text>
                  <text class="value">{{ currentDetail.implementer }}</text>
                </view>
                <view class="grid-item">
                  <text class="label">实施时间：</text>
                  <text class="value">{{ currentDetail.implementTime }}</text>
                </view>
                <view class="grid-item">
                  <text class="label">业务类型：</text>
                  <text class="value">{{ currentDetail.businessTypeLabel }}</text>
                </view>
              </view>
            </view>
            <view class="section">
              <view class="section-title">附件文件</view>
              <view class="attachments">
                <image
                    v-for="(image, index) in currentDetail.attachments"
                    :key="index"
                    :src="image"
                    mode="aspectFill"
                    class="attachment-image"
                    @click="previewImage(index)"
                />
              </view>
            </view>
            <view class="section">
              <view class="section-title">申请描述</view>
              <view class="description">
                <view class="desc-item">
                  <text class="label">车牌号：</text>
                  <text class="value">{{ currentDetail.plateNumber }}</text>
                </view>
                <view class="desc-item">
                  <text class="label">设备名称：</text>
                  <view class="devices">
                    <view
                        v-for="(device, index) in currentDetail.devices"
                        :key="index"
                        class="device-item"
                        @click="selectDevice(device)"
                    >
                      <uni-icons
                          :type="selectedDevice === device ? 'circle-filled' : 'circle'"
                          size="20"
                          color="#2979ff"
                          class="radio-icon"
                      />
                      <text class="device-text">{{ device.name }}</text>
                    </view>
                  </view>
                  <!-- 添加提示 -->
                  <view v-if="selectedDevice" class="seal-tip">
                    <text v-if="selectedDeviceSealNo" style="color: orange;">设备 {{ selectedDevice.name }}
                      绑定的铅封编号：{{ selectedDeviceSealNo }}
                    </text>
                    <text v-else style="color: orange;">设备 {{ selectedDevice.name }} 未绑定铅封</text>
                  </view>
                </view>

                <view class="desc-item">
                  <text class="label">原因描述：</text>
                  <text class="reason">{{ currentDetail.reason }}</text>
                </view>
                <view class="desc-item" v-if="currentDetail.applyDescription">
                  <text class="label">审批意见：</text>
                  <text class="reason">{{ currentDetail.applyDescription }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 新增按钮容器 -->
        <view class="button-container">
          <view class="button-group">
            <button class="new-action-button seal-action" @click="handleSealApply">
              铅封施拆
            </button>
            <button 
  class="new-action-button complete-action" 
  :class="{ disabled: currentDetail.status?.label === '已作业' }" 
  :disabled="currentDetail.status?.label === '已作业'"
  @click="handleCompleteTask"
>
  完成作业
</button>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 选择输入方式弹窗 -->
    <view v-if="isScanPopupVisible" class="popup-mask" @click="closeScanPopup">
      <view class="popup-content scan-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">选择输入方式</text>
          <view class="popup-close" @click="closeScanPopup">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="scan-options">
          <view class="scan-option" @click="handleScan">
            <view class="scan-icon-wrapper">
              <uni-icons type="scan" size="40" color="#2979ff"></uni-icons>
            </view>
            <text class="scan-text">扫码输入</text>
          </view>
          <view class="scan-divider"></view>
          <view class="scan-option" @click="showManualInput">
            <view class="scan-icon-wrapper">
              <uni-icons type="compose" size="40" color="#2979ff"></uni-icons>
            </view>
            <text class="scan-text">手动输入</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 手动输入弹窗 -->
    <view v-if="isManualInputVisible" class="popup-mask" @click="closeManualInput">
      <view class="popup-content manual-input-popup" @click.stop>
        <view class="popup-header">
          <text class="popup-title">输入铅封编号</text>
          <view class="popup-close" @click="closeManualInput">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="input-area">
          <input
              type="text"
              class="manual-input"
              v-model="currentSnCode"
              placeholder="请输入铅封编号"
              placeholder-class="input-placeholder"
          />
          <button class="confirm-button" @click="handleConfirmInput">
            <text class="button-text">确认</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 选择操作弹窗 -->
    <view v-if="isPopupVisible" class="popup-mask" @click="closePopup">
      <view class="popup-content" @click.stop>
        <view class="popup-header">
          <text class="popup-title operation-title">请选择操作</text>
          <view class="popup-close" @click="closePopup">
            <uni-icons type="close" size="24" color="#666666"></uni-icons>
          </view>
        </view>
        <view class="popup-buttons">
          <uni-button type="primary" class="action-button" @click="onUnseal">
            拆封
          </uni-button>
          <uni-button type="default" class="action-button outlined" @click="onApply">
            施打
          </uni-button>
        </view>
      </view>
    </view>
    <view
        v-if="showCustomToast"
        class="custom-toast"
        :style="{ zIndex: 999999 }"
    >
      <text class="toast-text">{{ toastMessage }}</text>
    </view>
  </view>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue';
import {getSignature} from '@/api/function/common/wechat';
import {countSnCode} from '@/api/function/sealno/sealno';
import {findSealNoByDeviceId} from '@/api/function/truck/truck';
import {findMyOperatorSealnoFlow, updateFlowStatus} from '@/api/function/sealnoFlow/sealnoFlow';

const searchKeyword = ref(''); // 搜索关键字
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页条数
const isLoading = ref(false); // 是否正在加载
const hasMore = ref(true); // 是否还有更多数据

// 处理搜索输入
const handleSearch = async () => {
  currentPage.value = 1; // 重置页码
  hasMore.value = true; // 重置是否有更多数据
  maintenanceList.value = []; // 清空列表
  await loadData(); // 加载数据
};

// 加载数据
const loadData = async () => {
  if (isLoading.value || !hasMore.value) return;

  isLoading.value = true;
  try {
    const response = await findMyOperatorSealnoFlow(
      currentPage.value,
      pageSize.value,
      { plateNo: searchKeyword.value }
    );
    if (response.code === 200) {
      const newData = formatData(response.rows);
      if (currentPage.value === 1) {
        maintenanceList.value = newData;
      } else {
        maintenanceList.value.push(...newData);
      }
      hasMore.value = newData.length >= pageSize.value;
      currentPage.value += 1;
      // 打印列表数据
      console.log('列表数据:', maintenanceList.value);
    } else {
      console.error('加载数据失败:', response.msg);
    }
  } catch (error) {
    console.error('加载数据请求失败:', error);
  } finally {
    isLoading.value = false;
  }
};

// 监听滚动到底部
const handleScrollToLower = () => {
  if (hasMore.value) {
    loadData();
  }
};

const backendUrl = process.env.NODE_ENV === 'production' ?
    window.location.origin + "/seano" : 'http://127.0.0.1:17080/seano';

const statusDict = {
  COMMIT: {label: '已提交', color: '#2979ff'},
  PASSED: {label: '已通过', color: '#67C23A'},
  RECECK: {label: '二次审批', color: '#E6A23C'},
  REPASS: {label: '二次审批通过', color: '#67C23A'},
  FINISH: {label: '已作业', color: '#909399'},
  ERROR_FINISH: {label: '异常结束', color: '#F56C6C'}
};

const businessTypeDict = {
  BUY: '采购',
  STORE: '入库',
  TRANS: '调拨',
  FIXED_WORK: '固封施打',
  REPAIR: '车辆维修',
  TRUCK_INIT: '新车施封',
  CUSTOM_SEND: '小额配送',
  SPECIAL: '异常施封'
};

const popup = ref();
const maintenanceList = ref([]);
const currentDetail = ref({});
const selectedDevice = ref(null); // 新增：记录选中的设备
const selectedDeviceSealNo = ref(''); // 新增：记录设备绑定的铅封编号

const selectDevice = (device) => {
  selectedDevice.value = device;
  selectedDeviceSealNo.value = ''; // 清空之前的铅封编号
  console.log('点击设备，设备ID:', device); // 打印设备ID
  if (device.id) {
    console.log('设备整体数据:', device); // 打印设备整体数据
    // 调用接口获取设备绑定的铅封编号
    findSealNoByDeviceId(device.id).then(response => {
      if (response.code === 200) {
        if (response.data) {
          selectedDeviceSealNo.value = response.data; // 保存铅封编号
          console.log('设备绑定的铅封编号:', response.data);
        } else {
          console.log('该设备未施打铅封'); // 提示设备未施打铅封
        }
      } else {
        console.error('获取铅封编号失败:', response.msg);
      }
    }).catch(error => {
      console.error('调用接口失败:', error);
    });
  }
};

const formatData = (data) => {
  return data.map(item => ({
    id: item.id, // 确保返回 id
    title: item.title,
    imageUrl: `${backendUrl}${item.fileNames[0].replace(/upload\/download\//, '')}`,
    applicant: item.userName,
    department: item.deptName,
    status: statusDict[item.status] || {label: '未知状态', color: '#999'},
    businessType: item.businessType,
    businessTypeLabel: businessTypeDict[item.businessType] || item.businessType,
    approver: item.applyName,
    implementer: item.opName,
    implementTime: item.opTime,
    applyDescription	: item.applyDescription,
    plateNumber: parseErrorDescription(item.errorDescription).plateNo || '',
    devices: parseErrorDescription(item.errorDescription).devices || [],
    reason: parseErrorDescription(item.errorDescription).problemDescription || '',
    attachments: item.fileNames.map(file => `${backendUrl}${file.replace(/upload\/download\//, '')}`)
  }));
};

const parseErrorDescription = (jsonStr) => {
  if (!jsonStr || typeof jsonStr !== 'string') {
    return {plateNo: '', devices: [], problemDescription: '', vehicleId: '', deviceId: ''};
  }
  try {
    const data = JSON.parse(jsonStr);
    if (!data) {
      return {plateNo: '', devices: [], problemDescription: '', vehicleId: '', deviceId: ''};
    }
    return {
      plateNo: data.plateNo?.name || '', // 车牌号
      vehicleId: data.plateNo?.id || '', // 车辆ID
      devices: data.devices?.map(device => ({name: device.name, id: device.id})) || [],
      problemDescription: data.problemDescription || '',
      deviceId: data.deviceId || ''
    };
  } catch (error) {
    console.error('解析原因描述失败:', error);
    return {plateNo: '', devices: [], problemDescription: '', vehicleId: '', deviceId: ''};
  }
};
const openDetail = (item: any) => {
  currentDetail.value = item;
  console.log('当前详情数据:', currentDetail.value); // 打印详情数据，检查 id 是否存在
  popup.value.open();
};
const closeDetail = () => {
  popup.value.close();
};
const previewImage = (index: number) => {
  uni.previewImage({
    urls: currentDetail.value.attachments,
    current: index
  });
};

onMounted(async () => {
  await loadData();
  await configureWx();
});

const configureWx = async () => {
  try {
    const currentUrl = window.location.href.split('#')[0];
    const signatureData = await getSignature(currentUrl);
    console.log('getSignature 返回值:', signatureData);

    jWeixin.config({
      beta: true,
      debug: false,
      appId: 'wl6e538311bc',
      timestamp: signatureData.data.timestamp,
      nonceStr: signatureData.data.nonceStr,
      signature: signatureData.data.signature,
      jsApiList: ['scanQRCode', 'checkJsApi']
    });
  } catch (error) {
    console.error('配置 wx.config 失败:', error);
    throw error;
  }
};
// 处理拆封操作
const onUnseal = () => {
  const businessType = currentDetail.value.businessType;
  closePopup();
  uni.navigateTo({
    url: `/pages/function/sealnoUnseal/index?snCode=${currentSnCode.value}&businessType=${businessType}&deviceId=${selectedDevice.value?.id}&billNo=`
  });
};

// 处理施打操作
const onApply = () => {
  const businessType = currentDetail.value.businessType;
  closePopup();
  uni.navigateTo({
    url: `/pages/function/sealnoApply/index?snCode=${currentSnCode.value}&businessType=${businessType}&deviceId=${selectedDevice.value?.id}&billNo=`
  });
};
const closePopup = () => {
  isPopupVisible.value = false;
};
const showCustomToast = ref(false);
const toastMessage = ref('');
// 当前扫描的铅封编号
const currentSnCode = ref('');

const showToast = (message: string) => {
  toastMessage.value = message;
  showCustomToast.value = true;
  setTimeout(() => showCustomToast.value = false, 1500);
};

const isManualInputVisible = ref(false);

const closeManualInput = () => {
  isManualInputVisible.value = false;
};

const showManualInput = () => {
  isScanPopupVisible.value = false;
  isManualInputVisible.value = true;
};
// 控制操作弹窗是否显示
const isPopupVisible = ref(false);
const handleScan = async () => {
  console.log("执行扫码操作");

  try {
    jWeixin.scanQRCode({
      desc: '固态施拆扫码触发',
      needResult: 1,
      scanType: ["qrCode", "barCode"],
      success: async (res) => {
        try {
          currentSnCode.value = res.resultStr;
          const result = await countSnCode(currentSnCode.value);
          if (result.code === 200 && result.data > 0) {
            popup.value.close();
            isManualInputVisible.value = false;
            isPopupVisible.value = true;
          } else {
            showToast('铅封编号无效');
            return;
          }
        } catch (error) {
          showToast('网络请求失败');
        }
      }
    });
  } catch (error) {
    console.error('扫码操作失败:', error);
    uni.showToast({title: '扫码功能初始化失败', icon: 'none'});
  }
};

const handleConfirmInput = async () => {
  console.log('点击确认按钮，当前输入的铅封编号:', currentSnCode.value);

  if (!currentSnCode.value) {
    console.log('铅封编号为空，显示提示');
    showToast('请输入铅封编号');
    return;
  }

  try {
    console.log('开始请求countSnCode接口，参数:', currentSnCode.value);
    const result = await countSnCode(currentSnCode.value);
    console.log('countSnCode接口返回结果:', result);

    if (result.code === 200 && result.data > 0) {
      popup.value.close();
      isManualInputVisible.value = false;
      isPopupVisible.value = true;
    } else {
      console.log('铅封编号无效，显示提示');
      showToast('铅封编号无效');
      return;
    }
  } catch (error) {
    console.error('请求countSnCode接口失败:', error);
    showToast('网络请求失败');
  }
};
const isScanPopupVisible = ref(false); // 控制弹窗显示状态

const handleDeviceChange = (device) => {
  selectedDevice.value = device;
};

const handleSealApply = () => {
  if (!selectedDevice.value) {
    showToast('请先选择设备');
    return;
  }
  isScanPopupVisible.value = true;
};

const handleCompleteTask = async () => {
  uni.showModal({
    title: '确认完成作业',
    content: '确定要完成当前作业吗？',
    success: async (res) => {
      if (res.confirm) {
        console.log('完成作业按钮被点击');
        try {
          uni.showLoading({ title: '处理中...', mask: true });
          const response = await updateFlowStatus(currentDetail.value.id, 'FINISH'); // 使用 'FINISH' 状态

          console.log("response", response);

          if (response.code === 200) {
            showToast('作业完成');
            popup.value.close(); // 关闭弹窗
            maintenanceList.value = []; // 清空列表数据
            currentPage.value = 1; // 重置页码
            hasMore.value = true; // 重置是否有更多数据
            await loadData(); // 重新加载数据
          } else {
            showToast('操作失败，请重试');
          }
        } catch (error) {
          console.error('完成作业失败:', error);
          showToast('网络请求失败');
        } finally {
          uni.hideLoading();
        }
      }
    }
  });
};

const closeScanPopup = () => {
  isScanPopupVisible.value = false; // 关闭弹窗
};
</script>
<style>
page {
  height: 100%;
}

.container {
  height: 100%;
  background-color: #f5f5f5;
}

.list-container {
  height: 100%;
  padding: 20rpx;
}

.list-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.title {
  font-size: 16px;
  font-weight: 700; /* 加粗 */
  color: #333333;
  margin-bottom: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content {
  display: flex;
  align-items: stretch; /* 垂直居中 */
}

.vehicle-image {
  width: 200rpx;
  height: auto; /* 高度自适应 */
  border-radius: 8rpx;
  flex-shrink: 0;
  object-fit: cover; /* 保持图片比例 */
}

.info {
  flex: 1;
  margin-left: 24rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 均匀分布 */
}

.info-item {
  margin-bottom: 12rpx;
}

.label {
  font-size: 14px;
  color: #666666;
}

.value {
  font-size: 14px;
  color: #333333;
}

.status {
  font-size: 14px;
}

.pending {
  color: #ff9900;
}

.approved {
  color: #52c41a;
}

.detail-container {
  width: 650rpx;
  max-height: 900rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  position: relative;
}

.detail-content-container {
  flex: 1;
  position: relative;
  overflow-y: auto;
}

.detail-header {
  padding: 24rpx;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-title {
  font-size: 16px;
  font-weight: 500;
  color: #333333;
  flex: 1;
  padding-right: 24rpx;
}

.detail-content {
  padding-bottom: 20rpx; /* 调整底部间距 */
}

.section {
  padding: 24rpx;
  border-bottom: 1px solid #f0f0f0;
}

.section-title {
  font-size: 15px;
  font-weight: 500;
  color: #333333;
  margin-bottom: 20rpx;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16rpx;
}

.grid-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.attachments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.attachment-image {
  width: 180rpx;
  height: 180rpx;
  border-radius: 8rpx;
}

.description {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.desc-item {
  display: flex;
  flex-direction: column;
}

.devices {
  display: flex;
  flex-wrap: wrap; /* 支持换行，适配多设备名称 */
  gap: 12rpx;
  margin-top: 8rpx;
}

.device-item {
  display: flex;
  align-items: center;
  padding: 12rpx 16rpx;
  border: 1rpx solid #e5e5e5;
  border-radius: 24rpx; /* 圆角更圆润 */
  background-color: #f9f9f9;
  transition: border-color 0.2s, background-color 0.2s;
}

.radio-icon {
  margin-right: 8rpx;
}

.device-text {
  font-size: 14px;
  color: #333;
}

/* 选中状态样式 */
.device-item:hover,
.device-item:active {
  background-color: #e6f4ff;
  border-color: #2979ff;
}

.device-item radio {
  transform: scale(0.8); /* 缩小单选按钮 */
  margin-right: 8rpx;
}

.device-item text {
  font-size: 14px;
  color: #333;
}

.reason {
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-top: 8rpx;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  background-color: #2979ff;
  color: #ffffff;
  font-size: 16px;
  border-radius: 16rpx;
  margin: 20rpx;
}

.seal-button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background: linear-gradient(135deg, #2979ff, #3f8cff); /* 渐变背景 */
  color: #ffffff;
  font-size: 16px;
  font-weight: 500; /* 加粗文字 */
  border-radius: 16rpx;
  z-index: 1;
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.3); /* 更明显的阴影 */
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.seal-button:active {
  background: linear-gradient(135deg, #1e64d1, #2e7aff); /* 点击时渐变变化 */
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(41, 121, 255, 0.2); /* 点击时阴影变化 */
}

/* 新增的样式 */
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.popup-content {
  background-color: #fff;
  padding: 20px 0;
  border-radius: 15px;
  width: 80%;
  max-width: 350px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 0;
  position: relative;
}

.popup-title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 32rpx;
  text-align: left;
}

.popup-close {
  position: absolute;
  right: 24rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-popup {
  padding-bottom: 32rpx;
}

.scan-options {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 48rpx 32rpx;
}

.scan-option {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
}

.scan-icon-wrapper {
  width: 120rpx;
  height: 120rpx;
  background-color: #f0f7ff;
  border-radius: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease;
}

.scan-icon-wrapper:active {
  background-color: #e6f0ff;
}

.scan-divider {
  width: 2rpx;
  height: 120rpx;
  background-color: #f0f0f0;
  margin: 0 32rpx;
}

.scan-text {
  font-size: 14px;
  color: #333;
}

/* 手动输入弹窗样式 */
.manual-input-popup .input-area {
  padding: 32rpx;
}

.manual-input-popup .popup-header {
  padding: 0 32rpx;
  margin-bottom: 0;
}

.manual-input-popup .popup-title {
  font-size: 18px;
  font-weight: bold;
  text-align: left;
}

.manual-input {
  width: 100%;
  height: 88rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  margin-bottom: 32rpx;
  text-align: left;
}

.input-placeholder {
  color: #999999;
  text-align: left !important;
  padding-left: 0;
}

.confirm-button {
  width: 100%;
  height: 88rpx;
  border-radius: 12rpx;
  background: linear-gradient(to right, #2979ff, #3f8cff);
  box-shadow: 0 4rpx 12rpx rgba(41, 121, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: none;
}

.confirm-button:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 6rpx rgba(41, 121, 255, 0.1);
}

.button-text {
  color: #ffffff;
  font-size: 32rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
}

.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16rpx 32rpx;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  border-radius: 8rpx;
  font-size: 14px;
  min-width: 150rpx;
  text-align: center;
  z-index: 999999;
}

.popup-buttons {
  padding: 32rpx;
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  gap: 20rpx;
}

.action-button {
  height: 112rpx;
  width: 300rpx;
  margin: 0 0 24rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  border-radius: 16rpx;
  transition: transform 0.2s ease;
}

.action-button:active {
  transform: scale(0.98);
}

.action-button:last-child {
  margin-bottom: 0;
}

.outlined {
  background-color: #ffffff;
  border: 2rpx solid #2979ff;
  color: #2979ff;
}

.button-container {
  border-top: 1px solid #f0f0f0; /* 分隔线 */
  padding: 24rpx;
}

.button-group {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
}

.new-action-button {
  flex: 1;
  height: 80rpx;
  border-radius: 16rpx;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 6rpx 16rpx rgba(41, 121, 255, 0.15);
  transition: transform 0.2s ease;
}

.seal-action {
  background: linear-gradient(90deg, #ff4d4f, #ff7875);
  border: 1rpx solid #ff4d4f;
}

.complete-action {
  background: linear-gradient(90deg, #52c41a, #73d13d);
  border: 1rpx solid #52c41a;
}

.new-action-button:active {
  transform: scale(0.96);
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.seal-tip {
  margin-top: 16rpx;
  font-size: 14px;
  padding: 8rpx 16rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}

/* 新增搜索框样式 */
.search-container {
  padding: 20rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}

.search-input {
  flex: 1;
  height: 64rpx;
  padding: 0 20rpx;
  background-color: #f5f5f5;
  border-radius: 32rpx;
  font-size: 14px;
  padding-left: 64rpx;
}

.search-icon {
  position: absolute;
  left: 40rpx;
  z-index: 1;
}

.disabled {
  background: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed;
}
</style>
